<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
</head>
<body>

    <div id="app">
        <h1>index.html </h1>
        <h2> 图片放在 yxb\static\img\ 下面 </h2>
        <img src="static/img/test.jpg">
        <h1> <a target="_blank" href="/mysql"> 大文本排版换行测试 ( and SQL 测试 ) </a></h1>
        <button @click="ajax_test()" style="font-size: 36px;">ajax test - 打开 console.log </button>
        <h1> <a target="_blank" href="/name/传参_test"> 传参 测试 </a></h1>
        <h1> {{title}}</h1>
        <h3> {{key}} </h3>
        
        <h1>[[title]]</h1>
        <h3>[[content]]</h3>

    </div>

</body>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.5/vue.global.min.js" type="application/javascript"></script>
<script>
    //  var date={{ str1 }}
    let data = JSON.parse('{{ data|safe }}');
    console.log(data.title);

    const { createApp } = Vue
    createApp({
        delimiters: ['[[', ']]'],
        data() {
            return {
                title: data.title,
                content: data.content,
            }
        },
        methods: {
            ajax_test: function () {
                // $.ajax的this作用域已经变了，所以要用一个变量接收 vue实例
                // alert(123123)
                let this_ = this;
                let url = "/ajax/test/";
                let method = 'POST';
                // let method='GET';
                let postObj = {
                    id: 233,
                    title: "大家好"
                };
                let xhr = new XMLHttpRequest();
                xhr.open(method, url, true);
                xhr.setRequestHeader('Content-type', 'application/json; charset=UTF-8')
                xhr.send(JSON.stringify(postObj));
                xhr.onload = function () {
                    if (xhr.status === 200) {
                        console.log(xhr.responseText);
                    }
                }
            }
        }
    }).mount('#app')

</script>

</html>